<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片遍历</title>
    <style>
        div img{
            width: 200px;
            height: 250px;
        }
    </style>
</head>
<body>
        <div>
            <img src="img/1.jpg" title="呆萌">
            <img src="img/2.jpg" title="性感">
            <img src="img/3.png" title="开朗">
            <img src="img/4.png" title="阳光">
        </div>
        <div id="box"></div>
        <script>
            //定义数据源
            var imgs = [
                {url:'img/1.jpg',title:'呆萌'},
                {url:'img/2.jpg',title:'性感'},
                {url:'img/3.png',title:'开朗'},
                {url:'img/4.png',title:'阳光'}
            ];
            //准备拼接字符，初始设置为空
            var s = '';
            for (var i = 0;i<imgs.length;i++){
                s = s + '<img src="'+ imgs[i].url +'" title="'+imgs[i].title+'">';
            }
            console.log(s);

            //找对象
            var box = document.getElementById('box');

            //像对象中插入已经准备好的html代码
            box.innerHTML = s;

        </script>
</body>
</html>